<template>
	<view class="nav_outer">
		<view class="dateTop">
			<u-calendar
				v-model="show"
				:max-date="getTime(7)"
				@change="changeTime"
			></u-calendar>
			<view @click="show = true" class="date_new">{{
				newDate == '' ? getTime(0) : newDate
			}}</view>
		</view>
		<view class="Content" v-for="(item, index) in contentList" :key="index">
			<view class="headImg">
				<img :src="item.headImg" alt="" />
			</view>
			<view class="leftContent">
				<view class="topRegistration">
					<view
						class="leftTitle"
						style="font-size: 35rpx; color: #000; font-weight: bolder"
						><text class="sizeStyle">专</text>{{ item.outpatient }}</view
					>
					<u-button type="primary" @click="registration(item)"
						>立即挂号</u-button
					>
				</view>
				<view class="introduce">
					<view style="font-size: 30rpx; color: #000; font-weight: bolder">{{
						item.name
					}}</view>
					<view>{{ item.physician }}</view>
					<view>{{ item.keshi }}</view>
				</view>
				<view class="beGood">
					<view
						><text style="font-size: 30rpx; color: #000; font-weight: bolder"
							>擅长：</text
						>{{ item.beGood }}</view
					>
				</view>
				<view class="money">
					<view
						><u-icon name="bell-fill" color="#5690FB"></u-icon>剩余号源<text
							style="color: #5690fb"
							>{{ item.residue }}</text
						></view
					>
					<view
						><u-icon name="rmb-circle-fill" color="#ff7b00"></u-icon>挂号费<text
							style="color: #ff7b00"
							>{{ item.money }}</text
						></view
					></view
				>
			</view>
		</view>
		<view class="safe"></view>
	</view>
</template>

<script>
import getTime from '../../utils/time'
export default {
	data() {
		return {
			show: false,
			newDate: '',
			contentList: [
				{
					id: '1',
					outpatient: '感染科专科门诊',
					name: '张三',
					physician: '住院医师',
					keshi: '感染外科门诊',
					beGood: '肝胆胰疾病；磁外科',
					residue: '22',
					money: '100.00',
					headImg:
						'https://imagelib.cdn.bcebos.com/cip_ml_pica15a6023-7d15-4a65-a3b0-4161e442dbe0.png_zXw400Xh400Xq90.png',
				},
				{
					id: '2',
					outpatient: '感染科专科门诊',
					name: '李四',
					physician: '住院医师',
					keshi: '感染外科门诊',
					beGood: '肝胆胰疾病；磁外科',
					residue: '12',
					money: '99.00',
					headImg:
						'https://imagelib.cdn.bcebos.com/cip_ml_pica15a6023-7d15-4a65-a3b0-4161e442dbe0.png_zXw400Xh400Xq90.png',
				},
			],
		}
	},
	methods: {
		getTime,
		changeTime(e) {
			this.newDate = e.result
			console.log(this.newDate)
		},
		registration(item) {
			console.log(item)
			uni.navigateTo({
				url: './make_?parameter=' + JSON.stringify(item),
			})
		},
	},
	onLoad: function (option) {
		console.log(getTime(0))
		// console.log(this.fun_date(0))
		// console.log(JSON.parse(option.parameter))
	},
}
</script>

<style lang="scss">
// .nav_outer {
// 	box-sizing: border-box;
// 	padding-bottom: 68rpx;
// 	padding-bottom: constant(safe-area-inset-bottom);
// 	padding-bottom: env(safe-area-inset-bottom);
// }
.date_new {
	border-width: 1px;
	border-color: #5690fb;
	border-style: dashed;
	padding: 5px 20px;
	margin-top: 30px;
	border-radius: 5px;
	background-color: #ffffff;
	color: #5690fb;
	font-size: 16px;
	/* display: inline-block; */
	text-align: center;
}
.Content {
	display: flex;
	padding: 15rpx;
	border-bottom: 1px solid #cccccc;
	margin-bottom: 20rpx;
	.headImg {
		display: flex;
		align-items: center;
		margin-right: 10rpx;
		img {
			width: 100rpx;
			height: 100rpx;
			border-radius: 50%;
		}
	}
	.leftContent {
		width: 100%;
		height: 200rpx;
		.topRegistration {
			display: flex;
			align-items: center;
			.leftTitle {
				flex: 1;
				.sizeStyle {
					display: inline-block;
					width: 44rpx;
					text-align: center;
					background-color: #0089ff;
					color: aliceblue;
					margin-right: 4rpx;
				}
			}
		}
		.introduce {
			display: flex;
			view {
				flex: 1;
			}
		}
		.beGood {
			color: #cccccc;
		}
		.money {
			display: flex;
			view {
				flex: 1;
			}
		}
	}
}
.safe {
	height: 0;
	height: constant(safe-area-inset-bottom);
	height: env(safe-area-inset-bottom);
}
</style>